<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="详情"
      :visible.sync="visible"
      append-to-body
      width="90vw"
      height="900px"
    >
      <div
        v-loading="$loadingPlugin.submit || $loadingPlugin.getDetailData"
        class="center"
      >
        <div class="left">
          <div v-if="datailType===4&&auditData.auditResultNew" class="box">
            <div class="box-title">变更:</div>
            <el-row class="box-info" :gutter="16">
              <el-col :span="10">
                <span class="label">变更时间:</span>
                <span class="desc">{{ auditData.auditDt? parseTime(auditData.auditDt, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">变更人:</span>
                <span class="desc">{{ auditData.auditUser }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">变更结果:</span>
                <span class="desc">{{ auditData.auditResultNew===1?'合格':auditData.auditResultNew===2?'不合格':'' }}</span>
              </el-col>
              <el-col :span="24">
                <span class="label">原因:</span>
                <span class="desc">{{ auditData.auditReasonName }}</span>
              </el-col>
              <el-col :span="24">
                <span class="label">备注:</span>
                <span class="desc">{{ auditData.changeRemark }}</span>
              </el-col>
            </el-row>
          </div>
          <div v-if="datailType!==3" class="box">
            <div class="box-title">线下稽查:</div>
            <el-row class="box-info" :gutter="16">
              <el-col :span="10">
                <span class="label">分派时间:</span>
                <span class="desc">{{ auditData.assignTime? parseTime(auditData.assignTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</span>
              </el-col>
              <el-col :span="6">
                <span class="label">安全员:</span>
                <span class="desc">{{ auditData.safetyName }}</span>
              </el-col>
              <el-col :span="8">
                <span class="label">稽查时间:</span>
                <span class="desc">{{ auditData.auditingTime? parseTime(auditData.auditingTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</span>
              </el-col>
              <el-col v-if="auditData.auditingResult" :span="10">
                <span class="label">稽查结果:</span>
                <span class="desc">{{ auditData.auditingResult===1?'合格':auditData.auditingResult===2?'不合格':'' }}</span>
              </el-col>
            </el-row>
          </div>
          <div v-if="datailType===2 || datailType===4" class="box">
            <div class="box-title">安检项对比：</div>
            <div v-for="(item, index) in auditData.maps" :key="index" class="box-info">
              <div class="check-title title-blue">{{ toChinesNum(parseInt(index+1)) }}、{{ item.itemName }} <span>{{ item.isPass===1?'不合格':item.isPass===2?'合格':'' }}</span></div>
              <div>
                <span>安检单：</span><span>{{ item.checkBillItem.itemDetailName }}</span>
              </div>
              <div>
                <span>稽查单：</span><span>{{ item.auditBillItem.itemDetailName }}</span>
              </div>
            </div>
          </div>
          <div v-if="datailType===2 || datailType===4" class="box">
            <div class="box-title">照片对比：</div>
            <div v-for="(item, index) in auditData.picMaps" :key="index" class="box-info">
              <div class="check-title title-blue">{{ toChinesNum(parseInt(index+1)) }}、{{ item.itemName }} <span>{{ item.isPass===1?'不合格':item.isPass===2?'合格':'' }}</span></div>
              <div class="imgListCheck">
                <p>安检单：</p>
                <div>
                  <img v-for="(ele,idx) in item.checkFileUrl" :key="baseUrl+ele" class="image-name" :src="baseUrl+ele" alt="" @click="showPreview(item.checkFileUrl,true,idx)">
                </div>
              </div>
              <div class="imgListCheck">
                <p>稽查单：</p>
                <div>
                  <img v-for="(ele,idx) in item.auditFileUrl" :key="baseUrl+ele" class="image-name" :src="baseUrl+ele" alt="" @click="showPreview(item.auditFileUrl,true,idx)">
                </div>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="box-title">基础信息</div>
            <el-row class="box-info" :gutter="16">
              <el-col :span="10">
                <span class="label">所属公司:</span>
                <span class="desc">{{ checkItemsData.corpName }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">隐患情况:</span>
                <span class="desc">{{ checkItemsData.warnLevelName }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">客户名称:</span>
                <span class="desc">{{ checkItemsData.csmName }}</span>
              </el-col>
              <el-col :span="10">
                <span class="label">所属机构:</span>
                <span class="desc">{{ checkItemsData.orgName }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">联系电话:</span>
                <span class="desc">{{ checkItemsData.csmPhone }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">用户类型:</span>
                <span class="desc">{{ checkItemsData.csmTypeName }}</span>
              </el-col>
              <el-col :span="10">
                <span class="label">安检时间:</span>
                <span class="desc">{{ checkItemsData.checkDt? parseTime(checkItemsData.checkDt, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">安检单号:</span>
                <span class="desc">{{ checkItemsData.checkId }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">客户编号:</span>
                <span class="desc">{{ checkItemsData.csmCode }}</span>
              </el-col>
              <el-col :span="10">
                <span class="label">配送地址:</span>
                <span class="desc">{{ checkItemsData.csmAddress }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">所属地市:</span>
                <span class="desc">{{ checkItemsData.cityNameCsm }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">所属区域:</span>
                <span class="desc">{{ checkItemsData.countryNameCsm }}</span>
              </el-col>
            </el-row>
            <el-row class="box-info" :gutter="16">
              <el-col :span="10">
                <span class="label">安检类型:</span>
                <span class="desc">{{ checkItemsData.checkType?checkItemsData.checkType ===1?'随单安检':checkItemsData.checkType ===2?'定期安检':'':'' }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">安检人:</span>
                <span class="desc">{{ checkItemsData.checkUser }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">关联整改单号:</span>
                <span class="desc">{{ checkItemsData.warnLevelName }}</span>
              </el-col>
              <el-col :span="10">
                <span class="label">可即查即改项:</span>
                <span class="desc">{{ checkanFix.modificationCount }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">已整改:</span>
                <span class="desc">{{ checkanFix.modificationEdCount }}</span>
              </el-col>
              <el-col :span="7">
                <span class="label">是否有意向:</span>
                <span class="desc">{{ checkanFix.isIntention }}</span>
              </el-col>
              <el-col :span="10">
                <span class="label">备注:</span>
                <span class="desc">{{ checkItemsData.remark }}</span>
              </el-col>
            </el-row>
          </div>

          <div class="check-content">
            <h4>安检内容</h4>
            <div class="check-warp">
              <div v-for="(ele,index) in checkItemsData.typeList" :key="index" class="check-item">
                <div class="item-title">{{ ele.checkTypeName }}</div>
                <div v-for="(item,idx) in ele.billItemList" :key="idx" class="item-desc">
                  <p>
                    <span>{{ item.itemName }} </span>
                    <span v-if="item.isIntention===2" class="item-red">有意向</span>
                    <span v-if="item.modificationType===2" class="item-blue">即查即改</span>
                    <span v-if="item.warnLevelName&&item.warnLevel>0" class="item-red">{{ item.warnLevelName }}</span>
                    <span v-if="item.modification===2">已整改</span>
                    <span v-if="item.itemDetailName">（{{ item.itemDetailName }}）</span>
                  </p>
                  <p v-if="item.modificationType===2">
                    <span>整改前：</span>
                  </p>
                  <div v-if="item.gasFileUrl.length>0" class="img-list">
                    <el-image v-for="imgItem in item.gasFileUrl" :key="imgItem" class="image" :src="imgItem" :preview-src-list="[imgItem]" />
                  </div>
                  <p v-if="item.modificationType===2">
                    <span>整改后：</span>
                  </p>
                  <div v-if="item.newGasFileUrl.length>0" class="img-list">
                    <el-image v-for="imgItem in item.newGasFileUrl" :key="imgItem" class="image" :src="imgItem" :preview-src-list="[imgItem]" />
                  </div>
                </div>
              </div>
              <div v-if="checkItemsData.checkBillImgurl&&checkItemsData.checkBillImgurl.length>0" class="check-item">
                <div class="item-title">纸质安检单</div>
                <div class="img-list">
                  <el-image v-for="item in checkItemsData.checkBillImgurl" :key="item" class="image" :src="item" :preview-src-list="[item]" />
                </div>
              </div>
              <div class="check-item">
                <div class="item-title">客户签字</div>
                <el-image v-if="checkItemsData.cmSignPict" class="image" :src="checkItemsData.cmSignPict" :preview-src-list="[checkItemsData.cmSignPict]" />
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="btn-group">
            <el-button type="primary" @click="lastImage">上一张</el-button>
            <el-button type="primary" @click="nextImage">下一张</el-button>
            <div class="btn-tool">
              <el-button type="primary" @click="blowUpHandle">放大</el-button>
              <el-button type="primary" @click="shrinkHandle">缩小</el-button>
              <el-button type="primary" @click="rotateHandle">旋转</el-button>
            </div>
          </div>
          <!-- <div class="image-container">
            <img :src="urls[currentUrlIndex]" fit="contain" class="image" />
          </div> -->
          <div class="img-info">
            <div ref="imgWrap" class="wrap" @mousewheel.prevent="rollImg">
              <img ref="image" :src="urls[currentUrlIndex]" alt="" @mousedown.prevent="moveImg">
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import moment from 'dayjs'
  import { parseTime, formatColumnMap } from '@/utils'
  import { auditingDetail } from '@/api'

  export default {
    name: 'detail',
    data() {
      return {
        visible: false,
        tableData: {
          column: [
            {
              prop: 'goodsName',
              label: '商品名称',
              minWidth: 100
            },
            {
              prop: 'goodsCode',
              label: '规格',
              minWidth: 105
            },
            {
              prop: 'gcount',
              label: '数量',
              minWidth: 70
            },
            {
              prop: 'fee1',
              label: '远程配送费',
              minWidth: 70
            },
            {
              prop: 'fee2',
              label: '上楼费',
              minWidth: 70
            },
            {
              prop: 'tip',
              label: '服务费',
              minWidth: 70
            },
            {
              prop: 'gprince',
              label: '单价',
              minWidth: 70
            }
          ],
          data: []
        },
        checkList: [
          {
            name: '门头或门牌号全景',
            checkItems: [
              {
                name: '必传',
                checked: true
              }
            ]
          },
          {
            name: '连接管：使用与灶具同寿命的金金属软管（不锈钢波纹管或金属包覆管）',
            checkItems: [
              {
                name: '合格',
                checked: true
              },
              {
                name: '不合格',
                checked: false
              }
            ]
          }
        ],

        currentUrlIndex: 0,
        urls: [],
        zoom: 1,
        rotate: 0,
        auditData: {},
        auditInfo: {},
        datailType: 1,
        gasCheckBillInfo: {
          billItemList: []
        },
        baseUrl: process.env.VUE_APP_BASE_IMGURL,
        checkItemsData: {},
        checkanFix: {}
      }
    },
    methods: {
      moment,
      formatColumnMap,
      parseTime,
      open(temp, datailType) {
        if (temp) {
          this.auditInfo = temp
          this.datailType = datailType
        }
        this.urls = []
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          this.currentUrlIndex = 0
          this.$nextTick(() => {
            this.initImage()
          })
          this.getDetailData()
        })
      },
      async getDetailData() {
        const params = {
          auditingCode: this.auditInfo.auditingCode
        }
        const res = await auditingDetail(params)
        if (res && res.data) {
          this.auditData = res.data
          this.checkItemsData = res.data.gasCheckBillInfo || {}
          // this.gasCheckBillInfo = res.data.gasCheckBillInfo
          this.dataHandle()
        }
      },
      dataHandle() {
        // if (this.gasCheckBillInfo.billItemList && this.gasCheckBillInfo.billItemList.length > 0) {
        //   this.gasCheckBillInfo.billItemList.forEach((item, index) => {
        //     this.gasCheckBillInfo.billItemList[index] = item
        //     let gasFileUrl = item.gasFileUrl ? item.gasFileUrl.split(',') : []
        //     gasFileUrl = gasFileUrl.map(item => this.baseUrl + item)
        //     this.gasCheckBillInfo.billItemList[index].gasFileUrl = gasFileUrl
        //   })
        //   const list = this.gasCheckBillInfo.billItemList.map(item => (item.gasFileUrl))
        //   if (list && list.length > 0) {
        //     list.forEach(item => {
        //       this.urls = this.urls.concat(...item)
        //     })
        //   }
        // }
        if (this.auditData.picMaps && this.auditData.picMaps.length > 0) {
          this.auditData.picMaps.forEach((item, index) => {
            if (item.auditBillItem && item.auditBillItem.gasFileUrl) {
              this.auditData.picMaps[index]['auditFileUrl'] = item.auditBillItem.gasFileUrl.split(',')
            }
            if (item.checkBillItem && item.checkBillItem.gasFileUrl) {
              this.auditData.picMaps[index]['checkFileUrl'] = item.checkBillItem.gasFileUrl.split(',')
            }
          })
        }
        this.checkanFix = {
          modificationCount: this.checkItemsData.modificationCount,
          modificationEdCount: this.checkItemsData.modificationEdCount,
          isIntention: this.checkItemsData.isIntention ? this.checkItemsData.isIntention === 1 ? '无意向' : this.checkItemsData.isIntention === 2 ? '有意向' : '' : ''
        }
        if (this.checkItemsData.typeList && this.checkItemsData.typeList.length > 0) {
          this.checkItemsData.typeList = this.checkItemsData.typeList.map((item) => ({
            ...item,
            billItemList: item.billItemList.map((ele) => ({
              ...ele,
              gasFileUrl: (ele.gasFileUrl ? ele.gasFileUrl.split(',') : []).map(e => (this.baseUrl + e)),
              newGasFileUrl: (ele.newGasFileUrl ? ele.newGasFileUrl.split(',') : []).map(e => (this.baseUrl + e))
            }))
          }))
        }
        this.checkItemsData.checkBillImgurl = (this.checkItemsData.checkBillImgurl ? this.checkItemsData.checkBillImgurl.split(',') : []).map(e => (this.baseUrl + e))
        this.checkItemsData.cmSignPict = this.checkItemsData.cmSignPict ? this.baseUrl + this.checkItemsData.cmSignPict : ''

        let imgList = []
        if (this.checkItemsData.typeList && this.checkItemsData.typeList.length > 0) {
          this.checkItemsData.typeList.forEach(item => {
            if (item.billItemList && item.billItemList.length > 0) {
              item.billItemList.forEach(ele => {
                imgList = imgList.concat(ele.gasFileUrl)
                imgList = imgList.concat(ele.newGasFileUrl)
              })
            }
          })
        }
        this.urls = imgList.concat(this.checkItemsData.checkBillImgurl)
        this.urls.push(this.checkItemsData.cmSignPict)
      },
      // 小写数字转大写
      toChinesNum(temp) {
        const changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
        const unit = ['', '十', '百', '千', '万']
        const strArr = temp.toString().split('').reverse()
        let newNum = ''
        if (temp < 100) {
          strArr.forEach((item, index) => {
            strArr[index] = parseInt(item)
          })
          for (let i = 0; i < strArr.length; i++) {
            newNum = (i === 0 && strArr[i] === 0 && strArr.length < 3 ? '' : (i > 0 && strArr[i] === 0 && strArr[i - 1] === 0 ? '' : (strArr[i] === 1 && strArr[i - 1] <= 9 && strArr[i - 1] !== 0 ? unit[i] + changeNum[strArr[i - 1]] : (strArr[i] === 1 && strArr[i - 1] <= 9 && strArr[i - 1] === 0 && strArr.length < 3 ? unit[i] : changeNum[strArr[i]] + (strArr[i] === 0 ? unit[0] : unit[i]))))) + (strArr[i] === 1 && strArr[i - 1] <= 9 ? '' : newNum)
          }
          return newNum
        } else {
          for (let i = 0; i < strArr.length; i++) {
            newNum = (i === 0 && strArr[i] === 0 ? '' : (i > 0 && strArr[i] === 0 && strArr[i - 1] === 0 ? '' : changeNum[strArr[i]] + (strArr[i] === 0 ? unit[0] : unit[i]))) + newNum
          }
          return newNum
        }
      },
      // 上一张
      lastImage() {
        if (this.currentUrlIndex > 0) {
          this.currentUrlIndex--
          this.initImage()
        } else {
          this.currentUrlIndex = this.urls.length - 1
          this.initImage()
        }
      },
      // 下一张
      nextImage() {
        if (this.currentUrlIndex < this.urls.length - 1) {
          this.currentUrlIndex++
          this.initImage()
        } else {
          this.currentUrlIndex = 0
          this.initImage()
        }
      },
      initImage() {
        var image = this.$refs['image']
        this.zoom = 1
        this.rotate = 0
        image.style.transform = 'scale(' + this.zoom + ')  rotate(' + this.rotate + 'deg)'
        image.style.left = '0px'
        image.style.top = '0px'
      },
      // 放大
      blowUpHandle() {
        var image = this.$refs['image']
        const transform = image.style.transform
        let zoom = transform.indexOf('scale') !== -1 ? +transform.split('(')[1].split(')')[0] : 1
        zoom = zoom + 0.1
        this.zoom = zoom
        if (zoom > 0.1 && zoom < 2) {
          image.style.transform = 'scale(' + this.zoom + ')  rotate(' + this.rotate + 'deg)'
        }
      },
      // 缩小
      shrinkHandle() {
        var image = this.$refs['image']
        const transform = image.style.transform
        let zoom = transform.indexOf('scale') !== -1 ? +transform.split('(')[1].split(')')[0] : 1
        zoom = zoom - 0.1
        this.zoom = zoom
        if (zoom > 0.1 && zoom < 2) {
          image.style.transform = 'scale(' + this.zoom + ')  rotate(' + this.rotate + 'deg)'
        }
      },
      // 旋转
      rotateHandle() {
        this.rotate = this.rotate + 90
        var image = this.$refs['image']
        image.style.transform = 'scale(' + this.zoom + ')  rotate(' + this.rotate + 'deg)'
      },
      // 滚动条控制放大或缩小
      rollImg(e) {
        var image = this.$refs['image']
        const transform = image.style.transform
        let zoom = transform.indexOf('scale') !== -1 ? +transform.split('(')[1].split(')')[0] : 1
        zoom += e.wheelDelta / 1200
        this.zoom = zoom
        if (zoom > 0.1 && zoom < 2) {
          image.style.transform = 'scale(' + this.zoom + ')  rotate(' + this.rotate + 'deg)'
        }
      },
      // 拖动
      moveImg(e) {
        var imgWrap = this.$refs.imgWrap
        var image = this.$refs.image
        const wrap = imgWrap
        const img = image
        const x = e.pageX - img.offsetLeft
        const y = e.pageY - img.offsetTop
        // 添加鼠标移动事件
        wrap.addEventListener('mousemove', move)
        function move(e) {
          img.style.left = e.pageX - x + 'px'
          img.style.top = e.pageY - y + 'px'
        }
        // 添加鼠标抬起事件，鼠标抬起，将事件移除
        img.addEventListener('mouseup', () => {
          wrap.removeEventListener('mousemove', move)
        })
        // 鼠标离开父级元素，把事件移除
        wrap.addEventListener('mouseout', () => {
          wrap.removeEventListener('mousemove', move)
        })
      },
      showPreview(list, isBase, index) {
        if (isBase) {
          this.urls = list.map(item => (this.baseUrl + item))
        } else {
          this.urls = list
        }
        this.currentUrlIndex = index
      }
    }
  }
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  height: 600px;
  overflow-y: hidden;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;
  .left {
    position: relative;
    z-index: 999;
    width: 60%;
    height: 100%;
    min-width: 702px;
    overflow-x: hidden;
    overflow-y: auto;
    .box {
      margin-bottom: 20px;
      .box-title {
        padding-left: 10px;
        margin-bottom: 10px;
        font-weight: 600;
      }
      .box-info {
        padding-left: 10px;
        line-height: 28px;
        .label {
          margin-right: 5px;
        }
        /deep/.el-checkbox {
          display: block;
        }
        .form-item {
          margin-bottom: 20px;
          .label {
            line-height: 50px;
          }
        }
      }
      .imgListCheck {
        div {
          display: flex;
        }
        img {
          display: block;
          width: 100px;
          height: auto;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .title-blue {
        color: #0E81EC;
        span {
          color: red;
        }
      }
    }
    .check-content {
      h4 {
        padding: 6px 0;
        margin: 0;
        font-size: 14px;
        // border:1px solid #ddd;
        line-height: 24px;
      }
      .check-warp {
        padding: 8px;
        border-top: 0;
        .check-item {
          margin-bottom: 20px;
          &:nth-last-child(1) {
            margin-bottom: 0;
          }
          .item-title {
            font-size: 14px;
            font-weight: 600;
          }
          .image,
          .image1 {
            width: 150px;
            height: 180px;
            margin-left: 50px;
          }

          .item-desc {
            p {
              line-height: 24px;
              .item-blue {
                color: #399BFF;
              }
              .item-red {
                color: red;
              }
              span {
                margin-left: 8px;
              }
            }
          }
          .img-list {
            padding-left: 10px;
            .image {
              margin: 0;
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
  .right {
    width: 40%;
    height: 100%;
    min-width: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    .btn-group {
      display: flex;
      .btn-tool {
        display: flex;
      }
      .el-button {
        margin: 0;
        margin-right: 10px;
      }
    }
    .img-info {
      width: 100%;
      padding: 10px 0;
      margin: 0 auto;
      overflow: hidden;
      box-sizing: border-box;
      .wrap {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 460px;
        height: 540px;
        overflow: hidden;
      }
      img {
        position: absolute;
        width: 458px;
        cursor: move;
      }
    }
  }
}

/deep/.el-dialog .el-dialog__body {
  padding: 10px;
  overflow-y: auto;
}

.auditImg {
  padding-left: 10px;
  line-height: 28px;
  .row-image {
    display: flex;
    flex-wrap: wrap;
    .image-name {
      display: block;
      width: 100px;
      height: auto;
      margin-right: 15px;
      margin-bottom: 15px;
      cursor: pointer;
    }
  }
}
</style>
